<template>
  <router-view class="views tabs" />
  <!-- <router-view v-slot="{ Component, route }" class="views tabs">
    <keep-alive v-if="route.meta.keep">
      <component
        :is="Component"
        :key="route.meta.usePathKey ? route.path : undefined"
      />
    </keep-alive>
    <keep-alive v-else>
      <component :is="Component" />
    </keep-alive> -->

  <van-tabbar v-model="active" route v-if="$route.meta.menu">
    <van-tabbar-item to="/">
      <span>首页</span>
      <template #icon="props">
        <img :src="props.active ? home.active : home.inactive" />
      </template>
    </van-tabbar-item>
    <van-tabbar-item to="/cate">
      <span>分类</span>
      <template #icon="props">
        <img :src="props.active ? cate.active : cate.inactive" />
      </template>
    </van-tabbar-item>
    <van-tabbar-item to="/live">
      <span>直播</span>
      <template #icon="props">
        <img :src="props.active ? video.active : video.inactive" />
      </template>
    </van-tabbar-item>
    <van-tabbar-item to="/cart" :badge="$store.getters.totalNum.num">
      <span>购物车</span>
      <template #icon="props">
        <img :src="props.active ? cart.active : cart.inactive" />
      </template>
    </van-tabbar-item>
    <van-tabbar-item to="/user">
      <span>我的</span>
      <template #icon="props">
        <img :src="props.active ? user.active : user.inactive" />
      </template>
    </van-tabbar-item>
  </van-tabbar>
</template>
<script>
import { ref } from "vue";
export default {
  data() {
    return {
      init: {},
    };
  },
  created() {
    this.$store.dispatch("initList");
    this.$store.dispatch("user/getUser");
  },
  setup() {
    const active = ref(0);
    const home = {
      active: "https://shqchapp.com/h5/static/image/index_black.png",
      inactive: "https://shqchapp.com/h5/static/image/index_gray.png",
    };
    const cate = {
      active: "https://shqchapp.com/h5/static/image/classify_black.png",
      inactive: "https://shqchapp.com/h5/static/image/classify_gray.png",
    };
    const video = {
      active: "https://shqchapp.com/h5/static/image/find_black.png",
      inactive: "https://shqchapp.com/h5/static/image/find_gray.png",
    };
    const cart = {
      active: "https://shqchapp.com/h5/static/image/cart_black.png",
      inactive: "https://shqchapp.com/h5/static/image/cart_gray.png",
    };
    const user = {
      active: "https://shqchapp.com/h5/static/image/user_black.png",
      inactive: "https://shqchapp.com/h5/static/image/user_gray.png",
    };
    return {
      home,
      cate,
      video,
      cart,
      user,
      active,
    };
  },
};
</script>
<style>
.van-nav-bar {
  --van-nav-bar-background-color: rgb(248, 248, 248);
}
.van-nav-bar__title {
  --van-font-weight-bold: bolder;
}
.van-nav-bar .van-icon {
  --van-nav-bar-icon-color: #666;
  font-size: 0.4rem;
}
</style>
<style>
.views {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 1rem;
}
</style>
